import React from 'react'
import { dehydrate, HydrationBoundary } from "@tanstack/react-query"
import { getQueryClient } from "../_components/get-query-client"
import PostsClient from "./posts.client"
import { getPostList } from "./hooks"

const page = async () => {
  const queryClient = getQueryClient()
  
  // 预取第一页数据（与客户端无限查询匹配）
  await queryClient.prefetchInfiniteQuery({
    queryKey: ["posts"],
    queryFn: () => getPostList({ page: 1, size: 10 }),
    getNextPageParam: (lastPage) => {
      // 计算下一页（示例：假设总页数为10）
      const totalPages = Math.ceil(100 / 10); // JSONPlaceholder 总共有100条
      const nextPage = lastPage.page + 1;
      return nextPage <= totalPages ? nextPage : undefined;
    },
  })

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <PostsClient />
    </HydrationBoundary>
  )
}

export default page